<template>
	<view class="container">
		<view>
			<view>

			</view>
			<view class="item-box flex align-center justify-between">
				<view>头像</view>
				<view class="flex align-center">
					<view class="avatar-box">
						<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="avatar" mode="widthFix">
						</image>
						<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="chooseavatar"></button>
					</view>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>

			</view>
			<view class="item-box flex align-center justify-between">
				<view>用户名</view>
				<view class="flex align-center">
					<view @click="editName">{{ user.name?user.name:'微信用户' }}</view>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
			</view>
			<button class="logout-btn" @click="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserProfile,
		updateUserProfile
	} from "@/api/system/user"
	import {
		comonUpload
	} from "@/api/common"
	export default {
		data() {
			return {
				user: this.$store.state.user,
				roleGroup: "",
				postGroup: ""
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			}
		},
		onLoad() {
			// this.$store.dispatch('GetInfo').then(res => {
			// })
			//this.getUser()
		},
		methods: {
			editName() {
				uni.showModal({
					title: '设置昵称',
					editable: true,
					content: '',
					showCancel: false,
					confirmText: '保存',
					confirmColor: '#FF7947',
					success: res => {
						if (res.confirm) {
							let data = {
								profilePhoto: this.$store.state.user.avatar ? this.$store.state.user
									.avatar : '',
								nickName: res.content
							}
							updateUserProfile(data).then(r => {
								this.$store.dispatch('GetInfo').then(res => {})
								uni.showToast({
									title: "修改成功",
									icon: 'success'
								})
							})
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			chooseavatar(res) {
				let data = {
					name: 'file',
					filePath: res.detail.avatarUrl
				}
				comonUpload(data).then(response => {
					let data = {
						profilePhoto: response.url,
						nickName: this.$store.state.user.name ? this.$store.state.user.name : ''
					}
					updateUserProfile(data).then(r => {
						this.$store.dispatch('GetInfo').then(res => {})
						uni.showToast({
							title: "修改成功",
							icon: 'success'
						})
					})

				})

			},
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					this.roleGroup = response.roleGroup
					this.postGroup = response.postGroup
				})
			},
			logout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F4F7;
	}

	.item-box {
		width: 696rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-left: 28rpx;
		margin-top: 20rpx;
		padding-left: 32rpx;
		padding-right: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		font-style: normal;
		text-transform: none;
	}

	.avatar-box {
		width: 70rpx;
		height: 70rpx;
		position: relative;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.avatar-btn {
		opacity: 0;
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.logout-btn {
		width: 644rpx;
		height: 96rpx;
		background: #FF7947;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 36rpx;
		margin-top: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
</style>